<template>
  <div >
    <el-container >
      <el-header style="height: 100px">
        <div style="position: relative ;top: 20px">
          <img src="@/assets/logo.png" alt="" style="width: 40pX; position: relative; top: 10pX; ">
          <span style="font-family: 'Helvetica Neu',Arial,sans-serif;font-size: 35px; margin-left: 15px; ">疾病-基因预测系统</span>
          <el-dropdown style="float: right; height: 60px; line-height: 60px">
            <span class="el-dropdown-link" style="color: #219ee1; font-size: 16px">用户：{{ user.name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="logout">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-header style="background-color: #28295b">
        <ul class="top">
          <li>
            <a href="/help">帮助</a>
          </li>
          <li>
            <a href="/aboutUs">关于我们</a>
          </li>
          <li>
            <a href="/prediction">主要功能</a>
          </li>
        </ul>
      </el-header>
      <el-container>
        <el-aside style="overflow: hidden; min-height: 78vh; background-color: #f3f3f4; width: 250pX">
          <el-menu :default-active="$route.path" router
                   default-active="2"
                   class="el-menu-vertical-demo"
                   style="background-color: #f1f1f3">
            <el-menu-item index="/">
              <i class="el-icon-menu"></i>
              <span slot="title">系统首页</span>
            </el-menu-item>
            <el-submenu index="2" >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>常见疾病介绍</span>
              </template>
              <el-menu-item-group >
                <el-menu-item index="/intro1">心血管病</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group >
                <el-menu-item index="/intro2">糖尿病</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/about">
              <i class="el-icon-menu"></i>
              <span slot="title">疾病信息库</span>
            </el-menu-item>
            <el-menu-item index="/prediction">
              <i class="el-icon-menu"></i>
              <span slot="title">疾病-基因关联预测</span>
            </el-menu-item>
            <el-menu-item index="/geneSearch">
              <i class="el-icon-menu"></i>
              <span slot="title">基因信息库</span>
            </el-menu-item>
            <el-menu-item index="/geneScore">
              <i class="el-icon-menu"></i>
              <span slot="title">基因关联得分</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main >
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "layout",
  data(){
    return {
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
    }
  },
  methods: {
    logout() {
      localStorage.removeItem("user");
      this.$router.push("/login");
    }
  }
}

</script>

<style>
.el-menu{
  border-right: none !important;
}
.top{
  float: right;
}
.top li{
  float: left;
  list-style-type: none;
  margin: 0 40px;
}
.top li a{
  color: #ddd;
  text-decoration: none;
}
.top li a:hover{
  color: greenyellow;
}
</style>